<template>
  <div class="goodsMessage" v-if="goodItem">
    <div class="back" @click="changeShowGood">
        <span class="icon-arrow_lift"></span>
      </div>

      <div class="good-desc">
        <div class="good-img">
          <img v-bind:src="goodItem && goodItem.image" alt="">
        </div>
        <div class="desc-msg">
          <div class="good-name" v-if="goodItem">{{goodItem.name}}</div>
          <div class="sold">
            <span class="month-sold"  v-if="goodItem">月售{{goodItem.sellCount}}份</span>
            <span class="good-praise"  v-if="goodItem">好评率{{goodItem.rating}}%</span>
          </div>
          <div class="price">
            <span class="nowPrice"  v-if="goodItem">￥{{goodItem.price}}</span>
            <span class="oldPrice" v-if="goodItem && goodItem.oldPrice">￥{{goodItem.oldPrice}}</span>
          </div>
          <div class="good-cart" >
            <transition>
              <div class="addtoCart" @click.stop.prevent="firstAdd($event)" v-show="!goodItem.count || (goodItem.count == 0)">加入购物车</div>
            </transition>
            <cartControl v-show="(goodItem.count !== undefined) && (goodItem.count > 0)" :food="goodItem"></cartControl>
          </div>
        </div>
      </div>
    
      <div class="good-description">
        <h2 class="desc-title">商品介绍</h2>
        <div class="desc-text"  v-if="goodItem">
          {{goodItem.info}}
        </div>
      </div>

      <div class="good-ratings">
        <div class="rating-choise">
          <div class="rating-btn">
            <h2 class="rating-title">商品评价</h2>
            <div class="btn">
              <div class="all btn-item">全部<span>57</span></div>
              <div class="recommend btn-item">推荐 <span>47</span></div>
              <div class="complain btn-item">吐槽 <span>10</span></div>
            </div>
          </div>
          <div class="onlyRating">
              <span class="icon-check_circle" :class="onlyRating && 'seeOnly'" @click="seeOnlyRating"></span>
              <span class="onlyRating-text">只看有内容的评价</span>
          </div>
        </div>
      <ul class="rating-wrapper">
        <li class="rating-item" v-for="(item, index) in goodItem && goodItem.ratings" :key="index">
          <goodMessageItem :item="item"></goodMessageItem>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import goodMessageItem from "./goodmessageitem";
import cartControl from "./cartControl";
import BScroll from "better-scroll";
import Vue from "vue";
import { mapState } from "vuex";
import { mapMutations } from "vuex";

export default {
  name: "goodMessage",
  data() {
    return {
      onlyRating: false
    }
  },
  props: {
    goods: {
      type: Array
    },
    itemName: {
      type: String
    }
  },
  components: {
    goodMessageItem,
    cartControl
  },
  methods: {
    ...mapMutations({
      changeShowGood: "changeShowGood"
    }),
    seeOnlyRating() {
      if(!this.onlyRating) {
        this.onlyRating = true
      } else {
        this.onlyRating = false
      }
    },
    firstAdd(event) {
      if (!event._constructed) {
        return;
      }
      if(!this.goodItem.count) {
        Vue.set(this.goodItem, 'count', 1);
      }
    } 
  },
  computed: {
    goodItem () {
      for(let i = 0; i < this.goods.length; i++){
        for(let j = 0; j < this.goods[i].foods.length; j++){
          if(this.goods[i].foods[j].name == this.itemName){
            return this.goods[i].foods[j];
          }
        }
      }
    }
  }
}

</script>

<style lang="stylus" ref="stylesheet/stylus">
@import '../assets/stylus/index.styl';
.goodsMessage
  width 100%
  position relative
  .back
    position fixed 
    z-index 100
    top 18px
    left 12px
    .icon-arrow_lift
      font-size 20px
      color rgba(#ffffff, .6)
      font-weight bold
  .good-desc
    background-color #ffffff
    border-1px(rgba(7, 17, 27, .1))
    .good-img
      width 100%
      height 350px
      overflow hidden
      img 
        width 100%
        height 100%
    .desc-msg
      position relative
      padding 18px
      font-size 0
      .good-name
        font-size 14px
        font-weight 700
        color rgb(7, 17, 27)
        line-height 14px
      .sold
        font-size 10px
        color rgb(147, 153, 159)
        line-height 10px
        margin-top 8px
        .good-praise
          margin-left 12px
      .price
        margin-top 18px
        .nowPrice
          font-size 14px
          font-weight 700
          line-height 24px
          color rgb(240, 20, 20)
        .oldPrice
          font-size 10px
          font-weight 700
          color rgb(147, 153, 159)
          line-height 24px
          text-decoration line-through
          margin-left 10px
      .good-cart
        position absolute 
        width 100px
        height 24px
        bottom 18px
        right 18px
        #cart-control
          position absolute 
          right 0
          top -6px
        .addtoCart
          background-color rgb(0, 160, 220)
          font-size 12px
          color #ffffff
          line-height 24px
          text-align center
          border-radius 24px
  .good-description
    background-color #ffffff
    padding 18px
    margin-top 16px
    border-top 1px solid rgba(7, 17, 27, .1)
    border-1px(rgba(7, 17, 27, .1))
    .desc-title
      font-size 14px
      font-weight 500
    .desc-text
      margin-top 6px
      padding 0 8px
      font-size 12px
      font-weight 200
      color rgb(77, 85, 93)
      line-height 24px
  .good-ratings
    background-color #ffffff
    margin-top 16px
    .rating-choise
      border-1px(rgba(7, 17, 27, .1))
      .rating-btn
        border-1px(rgba(7, 17, 27, .1))
        padding 18px 0
        margin 0 18px
        border-1px(rgba(7, 17, 27, .1))
        .rating-title
          font-size 14px
          font-weight 500
          color rgb(7, 17, 27)
          line-height 14px
        .btn
          margin-top 18px
          display flex
          .btn-item
            padding 8px 12px
            margin-right 8px
            border-radius 2px
            font-size 14px
            line-height 16px
            span 
              font-size 9px
          .all
            background-color rgba(0, 160, 220, .8)
            color #ffffff
          .recommend
            background-color rgba(0, 160, 220, .2)
            color rgb(77, 85, 93)
          .complain
            background-color rgba(77, 85, 93, .2)
            color rgb(77, 85, 93)
      .onlyRating
        padding 12px 18px
        display flex
        align-items center
        .icon-check_circle
          font-size 24px
          color rgb(147, 153, 159)
          line-height 24px
          margin-right 4px
          &.seeOnly
            color rgba(0, 160, 220, .8)
        .onlyRating-text
          font-size 12px
          color rgb(147, 153, 159)
          line-height 24px
    .rating-wrapper
      padding 0 18px
      .rating-item
        position relative
        padding 16px 0
        border-1px(rgba(7, 17, 27, .1))
        .rating-time
          font-size 10px
          color rgb(147, 153, 159)
          line-height 12px
        .rating-content
          display flex
          align-items center
          .icon-thumb_down
            font-size 12px
            color rgb(147, 153, 159)
            line-height 24px
            &.icon-thumb_up
              font-size 12px
              color rgb(0,160,220)
              line-height 24px
          .rating-info
            font-size 12px
            color rgb(7, 17, 27)
            line-height 16px
            margin-left 4px
        .avatar
          position absolute 
          right 0
          top 16px
          display flex
          .avatar-name  
            flex 1
            font-size 10px
            color rgb(147, 153, 159)
            line-height 12px
          .avatar-icon
            width 12px
            height 12px
            background #ffffff
            margin-left 6px
            border-radius 50%
            img   
              width 100%
              height 100%
              border-radius 50%
              vertical-align top
.v-enter {
  opacity 0
} 
.v-enter-to {
  opacity 1
}
/*组件刚要离开的状态*/
.v-leave {
  opacity 1
}
/*离开到哪儿*/
.v-leave-to {
  opacity 0
}
/*怎么离开的*/
.v-leave-active {
  transition: all .3s ease-in-out;
}
.v-enter-active {
  transition: all .3s ease-in-out;
}
</style>

